<template>
  <div style="width:100vw;" class="patent-box">
    <div class="record-header">
      <!-- 返回按钮 -->
      <!-- <mt-header fixed title="课程列表">
        <router-link to="/StudyCenter" slot="left">
          <mt-button class="back-butt" icon="back"></mt-button>
        </router-link>
      </mt-header>-->
    </div>
    <div>
      <mt-navbar v-model="active">
        <mt-tab-item id="status_1">已参加</mt-tab-item>
        <mt-tab-item id="status_0">未参加</mt-tab-item>
      </mt-navbar>
      <div class="action-sheet">
        <div style="position:relative;">
          <p @click="actionSheet" class="action-text">
            全部
            <span
              style="font-size:8px;position:relative;top:-2px;left:5px;"
              class="iconfont iconsanjiao"
            ></span>
          </p>
          <div
            v-show="scan"
            @click="scanCrm"
            style="position:absolute;top:0;right:0;padding:0 0 0 20px;"
            class="iconfont iconxiangji"
          ></div>
        </div>
      </div>
      <div style="position:fixed;z-index:10;top:88px;">
        <div style="position:relative;">
          <ul class="action-ul" v-show="sheetVisible">
            <li @click="activeLi(1)" :class="{'active-li':activeds}">全部</li>
            <li @click="activeLi(2)" :class="{'active-li':activedss}">内部课程</li>
            <li @click="activeLi(7)" :class="{'active-li':activedssss}">外部课程</li>
            <li @click="activeLi(3)" :class="{'active-li':activedsss}">微课程</li>
          </ul>
          <ul style="left:2.86rem;top:1.33rem;" class="action-ul" v-show="sheetVisibles">
            <li @click="activeLi(4)" :class="{'active-li':activeds2}">全部</li>
            <li @click="activeLi(5)" :class="{'active-li':activedss2}">已评估</li>
            <li @click="activeLi(6)" :class="{'active-li':activedsss2}">待评估</li>
          </ul>
        </div>
      </div>
      <div v-show="sheetVisible" @click="hideSheet" class="action-modal"></div>
      <div style="margin-top:40px;" class="page-tab-container">
        <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
          <mt-tab-container-item id="status_1">
            <!-- cell组件 -->
            <div class="bscroll" ref="joined">
              <div :style="loadedDown ? 'padding-bottom:93px;' : ''" class="bscroll-container">
                <div class="default-page-box" v-show="!joined.length">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div v-for="(item,index) in joined" :key="index" class="patent-body">
                  <div
                    @click="goDetail(item.id,'pingu',item.courseType,item.isEva)"
                    v-if="item.courseType != 2"
                  >
                    <div class="flex-row parent-body-item">
                      <div class="class-content">
                        <p class="content-tip">{{item.title}}</p>
                        <p class="content-time">培训时间：{{item.openTime}}</p>
                        <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                        <p class="content-teacher">
                          <span
                            style="color:#4787e4;margin-right:5px;"
                            class="iconfont iconxingming"
                          ></span>
                          讲师：{{item.username}}
                        </p>
                      </div>
                      <div
                        class="class-status"
                      >{{item.isEva == 0 ? '未评估' : item.isEva == 1 ? '已评估' : ''}}</div>
                    </div>
                    <div class="divler"></div>
                  </div>
                  <div
                    v-else
                    @click="goDetail(item.id,'weikec',item.courseType,'1',item.fileType)"
                    class="parent-body-item"
                  >
                    <div class="flex-row class-video-top">
                      <div class="class-content">
                        <p class="content-tip">{{item.title}}</p>
                        <p class="content-time">观看时间：{{item.updateTime}}</p>
                      </div>
                      <div
                        :style="`background-image:url(${item.coursePhoto || require('@/assets/homePicture/detail4.jpg')});`"
                        class="class-video"
                      ></div>
                    </div>
                    <div class="class-video-foot flex-row">
                      <div>微课程</div>
                      <!-- <div>已看</div> -->
                    </div>
                  </div>
                  <div class="divler"></div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="status_0">
            <!-- cell组件 -->
            <div class="bscroll" ref="unjion">
              <div :style="loadedDown ? 'padding-bottom:93px;' : ''" class="bscroll-container">
                <div class="default-page-box" v-show="!unjion.length">
                  <div class="default-page">
                    <div class="default-text">哎呀，空空如也!</div>
                  </div>
                </div>
                <div
                  @click="goDetail(item.id,'detail',item.courseType)"
                  v-for="(item,index) in unjion"
                  :key="index"
                  class="patent-body"
                >
                  <div class="flex-row parent-body-item">
                    <div class="class-content">
                      <p class="content-tip">{{item.title}}</p>
                      <p class="content-time">培训时间：{{item.openTime}}</p>
                      <p class="content-bumen">归属部门：{{item.deptName || '外部导师'}}</p>
                      <p class="content-teacher">
                        <span style="color:#4787e4;margin-right:5px;" class="iconfont iconxingming"></span>
                        讲师：{{item.username}}
                      </p>
                    </div>
                    <div class="class-status">未参加</div>
                  </div>
                </div>
                <div v-show="loadingDown" style="padding:10px;text-align:center;">
                  <mt-spinner type="snake"></mt-spinner>
                </div>
                <div v-show="loadedDown" style="line-height:50px;text-align:center;">没有更多数据</div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { setText } from "../../untils/ddnavigate";
const easydate = require("../../untils/easydate");
import { Indicator, Toast } from "mint-ui";
export default {
  name: "testUI",
  data() {
    return {
      active: "status_1",
      joined: [],
      unjion: [],
      pageTotal: "",
      params: {
        status: 1,
        courseType: "",
        page: 1,
        pageSize: 10
      },
      loadingDown: false,
      loadingUp: false,
      loadedDown: false,
      sheetVisible: false,
      sheetVisibles: false,
      activeds: true,
      activedss: false,
      activedsss: false,
      activedssss: false,
      activeds2: true,
      activedss2: false,
      activedsss2: false,
      scan: false
    };
  },
  mounted() {
    let that = this;
    let { params } = this;
    that.$post("qryMySignCourse", params).then(res => {
      if (res.success) {
        if (res.data) {
          that.joined = res.data;
          res.data.map(function(item) {
            for (var key in item) {
              if (key == "updateTime" || key == "openTime") {
                item[key] = easydate(item[key]).format("yyyy-MM-dd");
              }
            }
          });
        } else {
          that.joined = [];
        }
        this.joined = res.data;
        if (res.data && res.data.length > 0) {
          this.pageTotal = res.data && res.data[0].totals;
        }
        // better-scroll初始化
        this.initScroll("joined");
        this.initScroll("unjion");
      }
    });
    // 设置标题文字
    setText("我的课程");
  },
  watch: {
    active(oldVal, newVal) {
      let status = oldVal.split("_")[1];
      let { params } = this;
      this.loadedDown = false;
      params.page = 1;
      let returnText = "";
      if (status == 1) {
        returnText = "joined";
        params.status = 1;
        this.scan = false;
        this.joined = [];
      } else {
        returnText = "unjion";
        params.status = 0;
        this.scan = true;
        this.unjion = [];
      }
      this.publicAjax(params, returnText);
    }
  },
  methods: {
    scanCrm() {
      let that = this;
      dd.biz.util.scan({
        type: "all", // type 为 all、qrCode、barCode，默认是all。
        onSuccess: function(data) {
          //onSuccess将在扫码成功之后回调
          /* data结构
                { 'text': String}
              */
          that.$http.get(data.text).then(res => {
            Toast({
              message: res.data,
              duration: 2000
            });
          });
        },
        onFail: function(err) {}
      });
      return;
    },
    publicAjax(params, returnText) {
      let that = this;
      that.$post("qryMySignCourse", params).then(res => {
        if (res.success) {
          if (res.data) {
            res.data.map(function(item) {
              for (var key in item) {
                if (key == "openTime") {
                  item[key] = easydate(item[key]).format("yyyy-MM-dd");
                }
              }
            });
          } else {
            that[returnText] = [];
          }
          if (res.data && res.data.length > 0) {
            this.pageTotal = res.data && res.data[0].totals;
          }
          that[returnText] = that[returnText].concat(res.data);
          that.loadingDown = false;
          that.loadingUp = false;
          this.sheetVisibles = false;
          this.sheetVisible = false;
        } else {
          that.loadingDown = false;
          that.loadingUp = false;
          this.sheetVisibles = false;
          this.sheetVisible = false;
        }
      });
    },
    hideSheet() {
      this.sheetVisibles = false;
      this.sheetVisible = false;
    },
    actionSheet() {
      this.sheetVisible = !this.sheetVisible;
      this.sheetVisibles = false;
    },
    tabActive(courseType) {
      let active = this.active;
      let { params } = this;
      params.page = 1;
      this.loadedDown = false;
      if (active == "status_1") {
        params.status = 1;
        params.courseType = courseType;
        this.joined = [];
        this.publicAjax(params, "joined");
      } else {
        params.status = 0;
        params.courseType = courseType;
        this.unjion = [];
        this.publicAjax(params, "unjion");
      }
    },
    activeLi(index) {
      if (index == 1) {
        this.tabActive1(true, false, false, false);
        this.sheetVisibles = false;
        this.tabActive("");
      } else if (index == 2) {
        this.tabActive1(false, true, false, false);
        this.sheetVisibles = false;
        this.tabActive(0);
      } else if (index == 3) {
        this.tabActive1(false, false, true, false);
        this.sheetVisibles = false;
        this.tabActive(2);
      } else if (index == 4) {
        this.tabActive2(true, false, false);
        this.sheetVisibles = false;
      } else if (index == 5) {
        this.tabActive2(false, true, false);
        this.sheetVisibles = false;
      } else if (index == 6) {
        this.tabActive2(false, false, true);
        this.sheetVisibles = false;
      } else if (index == 7) {
        this.tabActive1(false, false, false, true);
        this.sheetVisibles = false;
        this.tabActive(1);
      }
    },
    tabActive1(blean1, blean2, blean3, blean4) {
      this.activeds = blean1;
      this.activedss = blean2;
      this.activedsss = blean3;
      this.activedssss = blean4;
    },
    tabActive2(blean1, blean2, blean3) {
      this.activeds2 = blean1;
      this.activedss2 = blean2;
      this.activedsss2 = blean3;
    },
    goDetail(id, type, smallCourse, isEva, fileType) {
      if (type == "pingu" && isEva != 1) {
        this.$router.push({
          path: "/classAssessment",
          query: { id: id }
        });
      } else if (type == "detail") {
        this.$router.push({
          path: "/classDetail",
          query: { id: id, statusNum: 6 }
        });
      } else {
        if (smallCourse == 2) {
          if (fileType == 0) {
            this.$router.push({
              path: "/learnClass",
              query: { id }
            });
          } else {
            this.$router.push({
              path: "/pdf",
              query: { id }
            });
          }
          return;
        } else {
          this.$router.push({
            path: "/classDetail",
            query: { id: id, statusNum: 4 }
          });
        }
      }
    },
    initScroll(dom) {
      let that = this;
      that.$nextTick(() => {
        let bscrollDom = this.$refs[dom];
        let bScroll = new BScroll(bscrollDom, {
          click: true,
          probeType: 2,
          bounceTime: 700, //回弹时间
          pullUpLoad: {
            threshold: 0, // 当上拉距离超过50px时触发 pullingUp 事件
            stop: 50
          },
          useTransition: false // 防止iphone微信滑动卡顿
        });
        // bScroll.on("pullingDown", () => {
        //   that.loadingUp = true;
        //   that.loadedDown = false;
        //   that.params.page = 1;
        //   setTimeout(() => {
        //     that.classFunction(that.params, dom, "downLoad");
        //   }, 1000);
        //   bScroll.finishPullDown();
        // });
        bScroll.on("pullingUp", () => {
          let { pageTotal } = that;
          console.log(pageTotal);
          if (that[dom].length < pageTotal) {
            that.loadingDown = true;
            that.params.page++;
            setTimeout(() => {
              that.publicAjax(that.params, dom, "upLoad");
            }, 1000);
          } else {
            that.loadedDown = true;
          }
          bScroll.finishPullUp();
        });
        bScroll.refresh();
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
@import url("~@/pagecss/my-class.less");
.content-tip {
  width: 400/75rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.class-video {
  width: 259/75rem;
  height: 124/75rem;
  // background: url("~@/assets/homePicture/detail4.jpg") 0 0 no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.class-video-foot,
.class-video-top {
  align-items: flex-start;
  justify-content: space-between;
}
.class-video-foot {
  margin-top: 20/75rem;
  padding-bottom: 10px;
  font-size: 18/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.5);
}
.default-page-box {
  position: relative;
  height: 100vh;
}
.default-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("~@/assets/studyCenter/null.png") 50% 30% no-repeat;
  background-size: 352/75rem 215/75rem;
}
.default-text {
  left: 0;
  right: 0;
  position: absolute;
  top: 45%;
  text-align: center;
  font-size: 30/75rem;
  font-weight: 400;
  color: rgba(110, 176, 246, 0.7);
}
.bscroll-container {
  padding-bottom: 143px;
}
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
.action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  padding: 0 30/75rem;
  height: 41px;
  line-height: 41px;
  border-bottom: 0.5px solid rgba(227, 227, 227, 1);
  background-color: #eeeeee;
  z-index: 999;
  .action-text {
    font-size: 26/75rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }
}
.action-ul {
  position: absolute;
  width: 215/75rem;
  line-height: 100/75rem;
  margin-left: -30/75rem;
  text-align: center;
  font-size: 26/75rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  background-color: #e3e3e3;
  .active-li {
    background-color: #4787e4;
    color: #ffffff;
  }
}
.action-modal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 77px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
</style>